<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script src="../lib/vue2.js"></script>
  </head>
  <body>
    <div id="box">
      <!-- 通过创建一个class对象来实现多个类名 -->
      <div :class="classObj">test</div>
      <!-- 若要添加新的类名需通过set方法 去除类名则改为false -->
      <button @click="addClass">add</button>

      <!-- 通过创建一个数组来实现多个类名 -->
      <div :class="classArr">test</div>
      <!-- 若要添加新的类名需通过push方法 去除类名则删除数组中的元素-->
      <!-- 重复push会造成多个重复类名 -->
      <button @click="addArr">push</button>
    </div>

    <script>
      let item = new Vue({
        el: "#box",
        data: {
          // true表示有此类名，此时类名为"aa bb"
          classObj: {
            aa: true,
            bb: true,
            cc: false,
          },
          classArr: ["aa", "bb"],
        },
        methods: {
          addClass() {
            // 添加一个新类名dd
            Vue.set(item.classObj, "dd", true);
          },
          addArr() {
            //判断没有dd才添加，若存在则不添加
            if (!item.classArr.includes("dd"))
              // 添加一个新类名dd
              item.classArr.push("dd");
          },
        },
      });
    </script>
  </body>
</html>
